<template>
    <MyDialog v-model:visible="DialogVisibleconfig.visible" :title="DialogVisibleconfig.title"
        :buttons="DialogVisibleconfig.buttons" width="400px" @close="DialogVisibleconfig.visible = false">





        <el-form :model="formData" :rules="rules" ref="formDataRef" label-width="80px" @submit.prevent>
            <!--input输入-->
            <el-form-item label="新密码" prop="password">
                <el-input clearable placeholder="提示信息" v-model.trim="formData.password" type="password" show-password>

                    <template #prefix>
                        <el-icon>
                            <Unlock />
                        </el-icon>
                    </template>


                </el-input>
            </el-form-item>
            <!--input输入-->
            <el-form-item label="再次输入" prop="repassword">
                <el-input clearable placeholder="提示信息" v-model.trim="formData.repassword"></el-input>
            </el-form-item>

        </el-form>



    </MyDialog>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue"
const { proxy } = getCurrentInstance();

const SubmitEvent = async () => {
    try {
        let params = {}
        Object.assign(params, formData.value)
        console.log(formData.value);
        
        let result = await proxy.request({
            url: '/updatePassword',
            method: 'POST',  
            params: {
                password: params.password
            }
        });

        if (result) {
            // 可以添加成功提示
            proxy.Mymessage.success('密码修改成功');
            // 重置表单
            formData.value.password = '';
            formData.value.repassword = '';
        } else {
            // 添加错误提示
            proxy.Mymessage.error('密码修改失败');
        }
    } catch (error) {
        console.error('密码修改出错:', error);
        proxy.Mymessage.error('密码修改出现异常');
    }

}

// 添加重置表单的方法
const resetForm = () => {
    // 重置表单数据
    formData.value.password = '';
    formData.value.repassword = '';
    
    // 清除表单校验
    if (formDataRef.value) {
        formDataRef.value.resetFields();
    }
}

const DialogVisibleconfig = ref({
    visible: false,
    title: "修改密码",
    buttons: [
        {
            text: "取消",
            type: "default",
            click: () => {
                // 重置表单
                resetForm();
                // 关闭弹窗
                DialogVisibleconfig.value.visible = false;
            }
        },
        {
            text: "确定",
            type: "primary",
            click: () => {
                formDataRef.value.validate((valid) => {
                    if (valid) {
                        SubmitEvent();
                        // 成功提交后重置表单并关闭弹窗
                        resetForm();
                        DialogVisibleconfig.value.visible = false;
                    }
                })
            }
        }
    ]
});
const formData = ref({
    password: '',
    repassword: ''

});
const formDataRef = ref();
const rules = {
    password: [
        { required: true, message: "请输入新密码", trigger: "blur" },
        { 
            validator: (rule, value, callback) => {
                // 密码校验规则：8-18位，不能是纯数字或纯字母
                const passwordRegex = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?])[A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]{8,18}$/;
                
                // 检查是否为纯数字
                const onlyNumberRegex = /^[0-9]{8,18}$/;
                // 检查是否为纯字母
                const onlyLetterRegex = /^[a-zA-Z]{8,18}$/;

                if (onlyNumberRegex.test(value)) {
                    callback(new Error("密码不能是纯数字"));
                } else if (onlyLetterRegex.test(value)) {
                    callback(new Error("密码不能是纯字母"));
                } else if (!passwordRegex.test(value)) {
                    callback(new Error("密码必须包含数字、字母和特殊字符，长度8-18位"));
                } else {
                    callback();
                }
            }, 
            trigger: "blur"
        }
    ],
    repassword: [
        { required: true, message: "请再次输入密码", trigger: "blur" },
        { 
            validator: (rule, value, callback) => {
                if (value !== formData.value.password) {
                    callback(new Error("两次输入的密码不一致"));
                } else {
                    callback();
                }
            }, 
            trigger: "blur"
        }
    ]
};
const changeshow = () => {
    // 重置表单
    resetForm();
    // 打开弹窗
    DialogVisibleconfig.value.visible = true;
}


defineExpose({ changeshow })
</script>

<style></style>